﻿<div class="sidebar">
    @if (_selectedTable == null)
    {
        <div class="d-flex h-100 align-items-center justify-content-center">
            No table selected
        </div>
    }
    else
    {
        <div class="form-group">
            <label for="tableName">Table name</label>
            <input id="tableName" type="text" class="form-control" value="@_selectedTable.Name" @oninput="OnTableNameChanged" />
        </div>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Column</th>
                    <th>Type</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var column in _selectedTable.Columns)
                {
                    <tr class="@(column == _selectedColumn ? "active" : "")" @onclick="e => SelectColumn(column)">
                        <td>
                            <input type="text" class="form-control" value="@column.Name" @oninput="e => OnColumnNameChanged(e, column)" />
                        </td>
                        <td>
                            <select class="form-control column-type" @onchange="e => OnColumnTypeChanged(e, column)">
                                @foreach (var val in Enum.GetValues(typeof(ColumnType)).Cast<ColumnType>())
                                {
                                    <option selected="@(column.Type == val)">@val</option>
                                }
                            </select>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
        <div class="float-right">
            <button class="btn btn-primary" @onclick="OnAddBtnClicked">
                <i class="fa fa-plus"></i>
            </button>
            <button class="btn btn-danger" @onclick="OnDeleteBtnClicked" disabled="@(_selectedColumn == null)">
                <i class="fa fa-trash"></i>
            </button>
        </div>
    }
</div>